import React from 'react';
import './App.css';
// import 'antd/dist/antd.css'; //包含了所有组件的样式 640kb
//引入 antd 相关组件
import { Tooltip,Avatar, DatePicker, Button, Divider, Space, Affix, Breadcrumb, Pagination } from 'antd';
import {
    SearchOutlined,
    HeartOutlined,
    LeftOutlined,
    RightOutlined,
    UserOutlined,
    AntDesignOutlined,
} from '@ant-design/icons';

class App extends React.Component {
    render() {
        return <div className="container">
            <h2>按钮</h2>
            <Space size="large">
                <Button type="primary">主按钮</Button>
                <Button icon={<SearchOutlined />}>搜索</Button>
            </Space>

            <h2>图标</h2>
            <LeftOutlined style={{ fontSize: '20px', color: 'red' }} />
            <HeartOutlined style={{ fontSize: '20px', color: 'red' }} />
            <RightOutlined style={{ fontSize: '20px', color: 'red' }} />

            <h2>分割线</h2>
            <Divider>Text</Divider>

            <h2>固钉</h2>
            <Affix offsetTop={100}>
                <Button type="primary">
                    回到顶部
                </Button>
            </Affix>

            <h2>路径导航</h2>
            <Breadcrumb>
                <Breadcrumb.Item>手机</Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="http://www.atguigu.com">智能机</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="http://www.atguigu.com">华为</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>华为 Mate 40</Breadcrumb.Item>
            </Breadcrumb>

            <h2>分页</h2>
            <Pagination defaultCurrent={1} total={50} />

            <h2>时间选择器</h2>
            <DatePicker onChange={this.onChange} />

            <h2>头像</h2>
            <Avatar.Group>
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
                <Tooltip title="Ant User" placement="top">
                    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                </Tooltip>
                <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
            </Avatar.Group>
        </div>
    }

    onChange = (date, dateString) => {
        console.log(date, dateString);
    }
}

export default App;
